<!--
 * @Author: CAI 2246513771@qq.com
 * @Date: 2024-06-14 09:40:48
 * @LastEditors: CAI 2246513771@qq.com
 * @LastEditTime: 2024-06-21 13:46:57
 * @FilePath: \revenue-manage-system\src\views\printing\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div id="app">
    <div class="flex-col">
      <div class="flexSSB">
        <div class="flex-row justify-center" style="margin-bottom: 10px">
          <button class="secondary circle-10" @click.stop="print">
            <i class="iconfont sv-printer" />
            浏览器打印
          </button>

          <!-- <button class="warning circle-10 ml-10" @click.stop="print2">
          直接打印(需要连接客户端)
          <i class="iconfont sv-printer" />
          </button>-->
        </div>
        <div>
          <el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="textarea"></el-input>
        </div>
        <el-button type="success" @click="updateFun">更新面版</el-button>
        <el-button type="success" @click="exportJson">导出JSON</el-button>
      </div>
      <div class="flex-row" style="height: 87vh;">
        <div class="flex-2 left">
          <div class="flex-row justify-center flex-wrap">
            <div class="title">基础元素</div>
            <div class="ep-draggable-item item" tid="defaultModule.text">
              <i class="iconfont sv-text" />
              <span>文本</span>
            </div>
            <div class="ep-draggable-item item" tid="defaultModule.image">
              <i class="iconfont sv-image" />
              <span>图片</span>
            </div>
            <div class="ep-draggable-item item" tid="defaultModule.longText">
              <i class="iconfont sv-longText" />
              <span>长文</span>
            </div>
            <div class="ep-draggable-item item" tid="defaultModule.table">
              <i class="iconfont sv-table" />
              <span>表格</span>
            </div>
            <div class="ep-draggable-item item" tid="defaultModule.html">
              <i class="iconfont sv-html" />
              <span>html</span>
            </div>
            <div class="ep-draggable-item item" tid="defaultModule.customText">
              <i class="iconfont sv-text" />
              <span>自定义</span>
            </div>
            <div class="title">辅助元素</div>
            <div class="ep-draggable-item item" tid="defaultModule.hline">
              <i class="iconfont sv-hline" />
              <span>横线</span>
            </div>
            <div class="ep-draggable-item item" tid="defaultModule.vline">
              <i class="iconfont sv-vline" />
              <span>竖线</span>
            </div>
            <div class="ep-draggable-item item" tid="defaultModule.rect">
              <i class="iconfont sv-rect" />
              <span>矩形</span>
            </div>
            <div class="ep-draggable-item item" tid="defaultModule.oval">
              <i class="iconfont sv-oval" />
              <span>圆形</span>
            </div>
          </div>
        </div>
        <div class="flex-5 center">
          <!-- 设计器的 容器 -->
          <div id="hiprint-printTemplate"></div>
        </div>
        <div class="flex-2 right">
          <!-- 元素参数的 容器 -->
          <div id="PrintElementOptionSetting"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted,defineExpose } from 'vue'
import { hiprint, defaultElementTypeProvider } from 'vue-plugin-hiprint'
import {listJson } from './printJson'

// Reactive variables  
const hiprintTemplate = ref({})
const printData = ref({})
const textarea = ref({})

// Lifecycle hooks  
onMounted(() => {
  hiprint.init({
    providers: [defaultElementTypeProvider()],
  })
  buildLeftElement()
  buildDesigner()
})

// Methods  
const updateFun = () => {
  textarea.value = listJson;
  hiprintTemplate.value.update(textarea.value)
 
}

const exportJson = () => {
  if (hiprintTemplate.value) {
    textarea.value = JSON.stringify(hiprintTemplate.value.getJson() || {})
  }
}

const buildLeftElement = () => {
  // Assuming jQuery is available globally  
  hiprint.PrintElementTypeManager.buildByHtml($('.ep-draggable-item'))
}

const buildDesigner = () => {
  $('#hiprint-printTemplate').empty() // Clear previous designs  
  hiprintTemplate.value = new hiprint.PrintTemplate({
    settingContainer: '#PrintElementOptionSetting', // Container for element settings  
  })
  hiprintTemplate.value.design('#hiprint-printTemplate')
}

const print = () => {
  let options = { leftOffset: -1, topOffset: -1 }
  let ext = {
    callback: () => {
      console.log('Browser print window opened')
    },
  }
  hiprintTemplate.value.print(printData.value, options, ext)
}  

defineExpose({
  printData,
  updateFun,
  print

});
</script>

<style lang="scss" scoped>
/* 重写全局 hiprint 样式 */
.hiprint-headerLine,
.hiprint-footerLine {
  border-color: purple !important;
}

.hiprint-headerLine:hover,
.hiprint-footerLine:hover {
  border-top: 3px dashed purple !important;
}

.hiprint-headerLine:hover:before {
  content: '页眉线';
  left: calc(50% - 18px);
  position: relative;
  background: #ffff;
  top: -14px;
  color: purple;
  font-size: 12px;
}

.hiprint-footerLine:hover:before {
  content: '页脚线';
  left: calc(50% - 18px);
  position: relative;
  color: purple;
  background: #ffff;
  top: -14px;
  font-size: 12px;
}
</style>
<style lang="scss" scoped>
/* 打印相关的样式 */
@import './style.css';

/* 区域 */
.left {
  background: white;
  border-radius: 4px;
  border: 1px solid #d9d9d9;
  padding: 10px 0;
  box-shadow: 2px 2px 2px 0px rgb(128 0 128 / 20%);
  overflow: auto;
}

.center {
  margin: 0 10px;
  background: white;
  border-radius: 4px;
  border: 1px solid #d9d9d9;
  padding: 20px;
  box-shadow: 2px 2px 2px 0px rgb(128 0 128 / 20%);
  overflow: auto;
}

.right {
  background: white;
  border-radius: 4px;
  border: 1px solid #d9d9d9;
  padding: 10px 0;
  box-shadow: 2px 2px 2px 0px rgb(128 0 128 / 20%);
  overflow: auto;
}

/* 左侧拖拽元素样式 */
.title {
  font-size: 16px;
  font-weight: 500;
  width: 100%;
  margin: 10px 0 0 24px;
}

.item {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: white;
  padding: 4px 10px;
  margin: 10px 8px 4px 8px;
  width: 38%;
  min-height: 60px;
  border-radius: 4px;
  box-shadow: 2px 2px 2px 2px rgba(171, 171, 171, 0.2);
}

.item .iconfont {
  font-size: 1.5rem;
}

.item span {
  font-size: 14px;
}
</style>
